<template>
	<view>
		<view class="topBack">
			<view class="" style="height: 88px;">

			</view>
			<view class="px-20">
				<view class="search round-4 flex items-center">
					<u-icon name="search" color="#F61564" size="20"></u-icon>
					<view class="ml-16 flex items-center">
						<input type="text" v-model="storeName" placeholder="搜索您想要的" placeholder-style="color:#F61564"
							@confirm="topsearch" />
					</view>
				</view>
			</view>

			<u-tabs :list="storeTypeList" :current="storeTypeIndex" lineWidth="30" lineColor="#FFF" :activeStyle="{
			            color: '#FFF',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#D9D9D9',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;" @click="tabClick">
			</u-tabs>

			<u-tabs :list="tabsList" :current="tabsIndex" lineWidth="30" lineColor="#FFF" :activeStyle="{
			            color: '#FFF',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#D9D9D9',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;" @click="tabClick2">
			</u-tabs>
		</view>

		<uni-nav-bar title=" " left-icon=" " :border="false" :status-bar="true" :fixed="true"
			background-color="transparent" color="#FFF" left-width="400rpx" @clickLeft="$tab.back()">
			<block slot="left">
				<view class="flex items-center">
					<u-icon name="arrow-left" color="#FFF" :bold="true"></u-icon>
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/shuzishangquan.png"
						style="height: 44rpx;" class="ml-16" mode="heightFix"></image>
				</view>
			</block>
		</uni-nav-bar>

		<view class="" style="height: 476rpx;">

		</view>

		<view class="px-20 py-20 relative">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="py-16 px-24 bg-FFF round-16 mb-28 shop-box" v-for="(item,index) in list" :key="item.id"
					@click="goDetail(item.id)" style="background-color: #F7F6F4;">

					<view class="flex items-center justify-between">
						<image :src="handleUrl(item.logo)" class="round-8 shop-img" mode=""></image>
						<view class="flex items-center justify-between" style="width: 550rpx;">
							<view class="">
								<view class="u-line-1 text-32 pl-12 mb-16" style="width: 340rpx;">
									{{item.name}}
								</view>
								<u-rate :value="5" activeColor="#F68000" readonly></u-rate>
							</view>

							<view class="go-shop text-center text-FFF text-24">
								进入店铺
							</view>
						</view>
					</view>

					<view class="flex items-center justify-between mt-16">
						<view class=" text-gray u-line-1">
							{{item.address}}
						</view>
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/icon_dianhua.png" mode=""
							class="image-52" @click.stop="$modal.makePhone(item.linkerMobile)"></image>
					</view>

					<view class="" v-if="item.mallSpuList && item.mallSpuList.length > 0">
						<u-divider></u-divider>

						<scroll-view scroll-x style="white-space: nowrap;">
							<view class="flex items-center">
								<view class="relative mr-24" v-for="(i,j) in item.mallSpuList" :key="i.id"
									@click.stop="$tab.nav(`/pages/commodity/detail?id=${i.id}&storeId=${i.storeId}`)"
									v-if="j<5">
									<image :src="globalConfig.imagePrefix + i.cover" class="commodity" mode=""></image>
									<view class="price-comm pl-12 text-FFF">
										￥{{i.nowPrice}}
									</view>
								</view>

								<view class="show-more" v-if="item.mallSpuList.length > 5">
									查看更多
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<view class="" style="height: 100rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [],
				tabsIndex: 0, //导航下标
				list: [],
				storeName: "",
				statusbar: uni.getSystemInfoSync().statusBarHeight + 44,
				globalConfig: getApp().globalData.config,
				storeTypeList: [{
						name: '线下(核销)',
						id: 2,
					},
					{
						name: '线上(快递)',
						id: 1,
					},
				],
				storeTypeIndex: 0
			};
		},
		onLoad() {
			this.getData()
			this.refresh()
		},
		methods: {
			handleUrl(url) {
				if(url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1){
					return url
				}else{
					return this.globalConfig.imagePrefix + url
				}
			},
			openAddress(item) {
				uni.openLocation({
					latitude: item.lng,
					longitude: item.lon,
				});
			},
			goJoin() {
				this.$tab.nav(`/pages/mine/join`)
			},
			goDetail(id) {
				this.$tab.nav(`/pages/shops/detail?id=${id}`)
			},
			topsearch(e) {
				this.refresh();
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.index.storeList({
						pageNum: pullScroll.page,
						pageSize: 10,
						name: this.storeName,
						prefecture: 0,
						type: this.tabsList[this.tabsIndex].id,
						businessModel: this.storeTypeList[this.storeTypeIndex].id
					})

					this.list = this.list.concat(res.rows || []);

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			//导航点击
			tabClick(e) {
				this.storeTypeIndex = e.index
				this.refresh()
			},
			tabClick2(e) {
				this.tabsIndex = e.index
				this.refresh()
			},
			async getData() {
				const tabsList = await this.$Api.common.typeChildrenAll({
					code: "merchantClassification"
				})
				this.tabsList = [{
					name: '全部',
					id: null
				}, ...tabsList.data]
			}
		}
	}
</script>

<style>
	page {
		background-color: #E7E7E7;
	}
</style>

<style lang="scss">
	.topBack {
		height: 476rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100%;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages2/shop-nav@2x.png') no-repeat;
		background-size: 100% 100%;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.search {
		border: 1rpx solid #FA554E;
		height: 72rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 154rpx 154rpx 154rpx 154rpx;
		border: 3rpx solid #FFFFFF;
		line-height: 72rpx;
		padding-left: 16rpx;
		color: #F61564;
	}

	.shop-box {
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.16);
		width: 710rpx;

		.shop-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #C4C4C4;
		}

		.go-shop {
			width: 136rpx;
			height: 56rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 210rpx 210rpx 210rpx 210rpx;
			line-height: 56rpx;
		}

		.commodity {
			width: 172rpx;
			height: 172rpx;
			border-radius: 8rpx;
		}

		.show-more {
			min-width: 172rpx;
			height: 172rpx;
			border-radius: 8rpx;
			line-height: 172rpx;
			text-align: center;
			background-color: #B4A59B;
			color: #FFF;
		}

		.price-comm {
			width: 100%;
			height: 38rpx;
			background: rgba(0, 0, 0, .4);
			position: absolute;
			left: 0;
			bottom: 0;
			border-radius: 0 0 8rpx 8rpx;
			line-height: 38rpx;
		}

		.shoping {
			width: 76rpx;
			height: 28rpx;
			background: #FFBE26;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			position: absolute;
			left: 16rpx;
			top: 16rpx;
		}

		.rest {
			width: 176rpx;
			height: 176rpx;
			background-color: rgba(0, 0, 0, .5);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;

			image {
				width: 80rpx;
				height: 74rpx;
			}
		}
	}
</style>